<!DOCTYPE html>
<html>
<head>
    <title>WebSocket消息展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            height: 400px;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        .status {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
<h2>WebSocket消息接收器</h2>
<div class="status" id="status">连接状态：未连接</div>
<div id="messages"></div>

<script>
    // 配置WebSocket服务器地址（根据实际情况修改）
    const wsUrl = 'ws://localhost:8080/websocket/alert';

    // 创建WebSocket连接
    const socket = new WebSocket(wsUrl);
    const messagesDiv = document.getElementById('messages');
    const statusSpan = document.getElementById('status');

    // 连接打开时
    socket.onopen = function(event) {
        statusSpan.textContent = '连接状态：已连接';
        addMessage('系统：成功连接到WebSocket服务器');
    };

    // 收到消息时
    socket.onmessage = function(event) {
        addMessage(event.data);
    };

    // 连接关闭时
    socket.onclose = function(event) {
        statusSpan.textContent = '连接状态：已断开';
        addMessage('系统：连接已关闭');
    };

    // 错误处理
    socket.onerror = function(error) {
        statusSpan.textContent = '连接状态：错误';
        addMessage('系统：连接错误 - ' + error.message);
    };

    // 添加消息到展示区域
    function addMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        messagesDiv.appendChild(messageElement);

        // 自动滚动到底部
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }
</script>
</body>
</html>